<template>
  <div class="environment-com">
    <title-com :title="title"></title-com>
    <div class="mt-5 d-none d-sm-none d-md-block d-lg-block">
      <ul class="row" v-if="list">
        <li class="col col-12 col-lg-4">
          <img class="w-100 h-50 p-5" :src="getUrl(list[0])" >
          <img class="w-100 h-50 p-5" :src="getUrl(list[1])" >
        </li>
        <li class="col col-12 col-lg-4">
          <img class="w-100 h-100 p-5" :src="getUrl(list[2])" >
        </li>
        <li class="col col-12 col-lg-4">
          <img class="w-100 h-50 p-5" :src="getUrl(list[3])" >
          <img class="w-100 h-50 p-5" :src="getUrl(list[4])" >
        </li>
      </ul>
    </div>
    <div class="mt-5  d-sm-block d-md-none d-lg-none environment-swiper">
      <swiper :options="swiperOption" class="d-sm-block d-md-none d-lg-none">
        <swiper-slide :key="index" v-for="(item,index) in list">
          <img :src="getImgUrlStyle(item, 320, 213)" alt="">
        </swiper-slide>
        <!--箭头-->
        <div class="swiper-button-prev icon iconfont icon-cc-arrow-left-circle" slot="button-prev"></div>
        <div class="swiper-button-next icon iconfont icon-cc-arrow-right-circle" slot="button-next"></div>
      </swiper>
    </div>

  </div>
</template>

<script>
  import titleCom from "./titleCom"

  export default {
    props:['title', 'list'],
    computed: {},
    data() {
      return {
        swiperOption: {
          breakpoints: {
            767: {
              slidesPerView: 1
            },
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          }
        }
      }
    },
    components: {
      titleCom
    },
    mounted() {

    },
    methods: {

    }
  }
</script>

<style lang="less" scoped>
  @import "~assets/style/public";

  .environment-com{
    margin-top: 50/@size;
    img{
      display: block;
    }
  }

  @media (min-width:320px) and (max-width: 767px) {
    .environment-com{
      ul{
        margin: 0;
      }
      .environment-swiper{
        height: 426/@size;
       margin-bottom: 40/@size;
        overflow-y: hidden;
        .swiper-wrapper{
          max-height: 426/@size !important;
        }
        .swiper-button-prev{
          left: -2/@size !important;
        }
        .swiper-button-next{
          right: 8/@size !important;
        }
        .icon{
          font-size: 60/@size;
          color: @theme-color;
        }
        .swiper-slide{
           display: flex;
            justify-content: center;
            img{
              height: 426/@size !important;
            }
            .text-wrap{
              .text{
                font-family: @font-title;
                font-size: @font-30;
                h1{
                  font-family:@font-title;
                  font-size: @font-30;
                }
              }
          }
        }
      }
    }
  }


</style>
